import React from 'react';
import { WeaCheckbox, WeaSelect, WeaInputNumber, WeaLocaleProvider } from 'ecCom';
import { Row, Button, message } from 'antd';
import { inject, observer } from 'mobx-react';
import RemindPerson from './RemindPerson';
import './index.less';

const getLabel = WeaLocaleProvider.getLabel;
const getOpts = () => [
    {
      key: '10',
      showname: '10',
    },
    {
      key: '30',
      showname: '30',
    },
    {
      key: '60',
      showname: '60',
    },
    {
      key: '90',
      showname: '90',
    },
    {
      key: 'custom',
      showname: `${getLabel('131372', '自定义')}`,
    },
  ];
@inject('edcPublishStore')
@observer
export default class OtherSetting extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.edcPublishStore;

    const { timeLimitEnable, timeLimit } = this.store.publishSettings;
    const newTimeLimit = timeLimit ? JSON.parse(timeLimit) : {};

    this.state = {
      timeLimitEnable: timeLimitEnable || false,
      timeType: newTimeLimit.timeType || '10',
      customTime: newTimeLimit.customTime || '',
      isloading: false,
    };
  }

  onChange = (key, val) => {
    const { onSetChange } = this.store;

    if (key === 'timeLimitEnable') {
      this.setState({ [key]: val === '1' });
      onSetChange(key, val);
    } else {
      this.setState({ [key]: val });
      onSetChange('timeLimit', {
        [key]: val,
      });
    }
  }

  onSave = () => {
    const { setUpdate, publishSettings } = this.store;
    const { dataApplyPerson } = publishSettings;

    if (dataApplyPerson && JSON.parse(dataApplyPerson).length >= 1) {
      setUpdate().then(() => {
        message.success(getLabel('502234', '设置成功'));
      });
    } else {
      message.error(getLabel(522819, '至少设置1个表单填写权限申请处理人'));
    }
  }

  render() {
    const { timeType, customTime, timeLimitEnable } = this.state;
    const timeWriteContent = () => (
        <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@ka75x7`}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@i6ac6m`}
            options={getOpts()}
            onChange={val => this.onChange('timeType', val)}
            value={timeType}
          />
          {
            timeType === 'custom' &&
            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@qo9phc`}>
              <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@t51xtc`}
                min={1}
                defaultValue={customTime}
                onBlur={val => this.onChange('customTime', val)}
                placeholder={getLabel('519455', '自定义时间')}
              />
            </React.Fragment>
          }
        </React.Fragment>
      );
    const renderContent = () => {
      const tempContent = getLabel('519466', '限时#timestatus#分钟内完成表单填写，').split('#timestatus#');
      const lastContent = getLabel('519467', '超时将自动提交表单，且不进行字段必填校验');
      return [tempContent[0], timeWriteContent(), tempContent[1], lastContent];
    };
    return (
      <div className="other-setting">
        <div className="limit-time-module">
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@h6zkdt`} className="header">{getLabel('519465', '限时填写设置') }</Row>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2qg7fa`}>
            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@4axr6l`}
              content={getLabel('519453', '限时填写')}
              onChange={val => this.onChange('timeLimitEnable', val)}
              value={timeLimitEnable ? '1' : '0'}
              display={'switch'}
              style={{ height: 20 }}
            />
            <span className="switch-text">{timeLimitEnable ? getLabel('502554', '已开启') : getLabel('502555', '已关闭')}</span>
          </Row>
          {
            timeLimitEnable &&
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cqky29`} className="content">
              <label>{renderContent()}</label>
            </Row>
          }
          <RemindPerson ecId={`${this && this.props && this.props.ecId || ''}_RemindPerson@3jk5zg`} />
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kr6yuy`}>
            <div className="relation-btn">
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@999o7d`} type="primary"
                onClick={this.onSave}
              >
                {getLabel(86, '保存')}
              </Button>
            </div>
          </Row>
        </div>
      </div>
    );
  }
}
